<!--
 * @FilePath: /src/map/components/InitOlMap/index.vue
 * @Description: 
-->
<template>
  <div>
    <div class="map-container" ref="mapContainer"></div>
  </div>
</template>
<script setup name="InitOlMap">
import { ref, defineProps } from 'vue';
import { getTiandituVecMap, getTiandituVecText,getTiandituImgMap, getTiandituImgText, getTiandituDemMap } from '@/map/projMap.js';

import Map from 'ol/Map';
import View from 'ol/View';
import { DoubleClickZoom, PinchZoom, MouseWheelZoom, DragPan } from 'ol/interaction';

const props = defineProps({
  mapLayer: {
    type: [Array, Object],
    default: null,
  },
  refId: { type: String, default: 'Container' },
  center: { type: Array, default: () => [105, 25.5] },
  zoom: { type: Number, default: 4 },
  minZoom: { type: Number, default: 4 },
  maxZoom: { type: Number, default: 14 },
  constrainResolution: { type: Boolean, default: true },
  //放大缩小
  zoomDisable: {
    type: Boolean,
    default: true,
  },
  //双击放大缩小
  doubleZoomDisable: {
    type: Boolean,
    default: false,
  },
  //拖拽
  dragPanDisable: {
    type: Boolean,
    default: true,
  },
  //捏合缩放
  pinchZoomDisable: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(['getMap', 'mapClick','mapContextmenu']);
defineExpose({
  showTiandituVecMapLayer,
  showTiandituImgMapLayer,
  showTiandituDemMapLayer,
});
const mapContainer = ref(null);
const map = ref(null);
watch(
  () => props.refId,
  (newId) => {
    if (newId) {
      // 更新地图容器的引用
      mapContainer.value = document.getElementById('map' + newId);
      // 重新初始化地图
      initMap();
    }
  }
);
onUnmounted(() => {
  map.value = null;
}),
  onMounted(() => {
    console.log('初始化地图');
    initMap();
  });
function initMap() {
  if (!mapContainer.value) {
    mapContainer.value = 'mapContainer';
  }
  map.value = new Map({
    target: mapContainer.value,
    view: new View({
      center: props.center,
      maxZoom: props.maxZoom,
      minZoom: props.minZoom,
      zoom: props.zoom,
      constrainResolution: props.constrainResolution,
      smoothResolutionConstraint: false,
      projection: 'EPSG:4490',
    }),
  });
  //天地图街道图
  initTiandituVecMapLayer();
  let { mapLayer } = props;
  if (mapLayer) {
    if (isObject(mapLayer)) {
      map.value.addLayer(mapLayer);
    } else if (isArray(mapLayer)) {
      mapLayer.forEach((item) => {
        map.value.addLayer(item);
      });
    }
  }
  disableDragInteraction(map);//根据参数是否禁用交互操作
  setupSelectInteraction(map);//地图点击、右键菜单等事件
  emits('getMap', map);
}
const disableDragInteraction = (mapInstance) => {
  if (mapInstance.value) {
    mapInstance.value.getInteractions().forEach((interaction) => {
      if (interaction instanceof MouseWheelZoom) {
        interaction.setActive(props.zoomDisable);
      }
      if (interaction instanceof DoubleClickZoom) {
        interaction.setActive(props.doubleZoomDisable);
      }
      if (interaction instanceof DragPan) {
        interaction.setActive(props.dragPanDisable);
      }
      if (interaction instanceof PinchZoom) {
        interaction.setActive(props.pinchZoomDisable);
      }
    });
  }
};
const setupSelectInteraction = (mapInstance) => {
  // 监听地图的点击事件
  mapInstance.value.on('click', (event) => {
    emits('mapClick', event);
  });
  // 监听地图的右键菜单事件
  mapInstance.value.on('contextmenu', (event) => {
    emits('mapContextmenu', event);
  });
};

function initTiandituVecMapLayer() {
  if (!map.value) {
    return;
  }
  let layer = getTiandituVecMap();//fxpc天地图街道底图
  map.value.addLayer(layer);
  layer.set('id', 'Tianditu_Vec_Map');
  layer.setZIndex(0);
  let layer1 = getTiandituVecText();//fxpc天地图街道标签
  map.value.addLayer(layer1);
  layer1.set('id', 'Tianditu_Vec_Text');
  layer1.setZIndex(0);
}

function initTiandituImgMapService() {
  if (!map.value) {
    return;
  }

  let layer = getTiandituImgMap();//fxpc天地图影像底图
  map.value.addLayer(layer);
  layer.set('id', 'Tianditu_Img_Map');
  layer.setZIndex(0);
  let layer1 = getTiandituImgText();//fxpc天地图影像标签
  map.value.addLayer(layer1);
  layer1.set('id', 'Tianditu_Img_Text');
  layer1.setZIndex(0);
}
function initTiandituDemMapService() {
  if (!map.value) {
    return;
  }

  let layer = getTiandituDemMap();
  map.value.addLayer(layer);
  layer.set('id', 'Tianditu_Dem_Map');
  layer.setZIndex(0);
}
//天地图街道图
function showTiandituVecMapLayer() {
  if (!map.value) {
    return;
  }

  let layers = map.value.getLayers();
  let isCreate = false;
  layers.forEach((layer) => {
    if (layer.get('id') == 'Tianditu_Vec_Map') {
      layer.setVisible(true);
      isCreate = true;
    }else if (layer.get('id') == 'Tianditu_Vec_Text') {
      layer.setVisible(true);
    }else if (layer.get('id') == 'Tianditu_Img_Map') {
      layer.setVisible(false);
    }else if (layer.get('id') == 'Tianditu_Img_Text') {
      layer.setVisible(false);
    }else if (layer.get('id') == 'Tianditu_Dem_Map') {
      layer.setVisible(false);
    }
  });

  if (!isCreate) {
    initTiandituVecMapLayer();
  }
}
//天地图影像图
function showTiandituImgMapLayer() {
  if (!map.value) {
    return;
  }

  let layers = map.value.getLayers();
  let isCreate = false;
  layers.forEach((layer) => {
    if (layer.get('id') == 'Tianditu_Img_Map') {
      layer.setVisible(true);
      isCreate = true;
    }else if (layer.get('id') == 'Tianditu_Img_Text') {
      layer.setVisible(true);
    }else if (layer.get('id') == 'Tianditu_Vec_Map') {
      layer.setVisible(false);
    }else if (layer.get('id') == 'Tianditu_Vec_Text') {
      layer.setVisible(false);
    }else if (layer.get('id') == 'Tianditu_Dem_Map') {
      layer.setVisible(false);
    }
  });

  if (!isCreate) {
    initTiandituImgMapService();
  }
}
//天地图地形图
function showTiandituDemMapLayer() {
  if (!map.value) {
    return;
  }

  let layers = map.value.getLayers();
  let isCreate = false;
  layers.forEach((layer) => {
    if (layer.get('id') == 'Tianditu_Dem_Map') {
      layer.setVisible(true);
      isCreate = true;
    }else if (layer.get('id') == 'Tianditu_Vec_Map') {
      layer.setVisible(false);
    }else if (layer.get('id') == 'Tianditu_Vec_Text') {
      layer.setVisible(false);
    }else if (layer.get('id') == 'Tianditu_Img_Map') {
      layer.setVisible(false);
    }else if (layer.get('id') == 'Tianditu_Img_Text') {
      layer.setVisible(false);
    }
  });

  if (!isCreate) {
    initTiandituDemMapService();
  }
}

function isObject(mapLayer) {
  return typeof mapLayer === 'object' && !Array.isArray(mapLayer);
}
function isArray(mapLayer) {
  return Array.isArray(mapLayer);
}
</script>
<style scoped lang="scss">
.map-container {
  width: 100%;
  height: 100%;
}
</style>
